<template>
	<navbar title="课程详情" :isBack="true"></navbar>
	<view class="page">
		<!-- <view class="" style="display: flex;justify-content: center;align-items: center;">
			<span style="color: #F00505;">9分59秒</span>后关闭
		</view> -->
		<!-- <u-count-down :timestamp="item.time" style="color: #F00505;"></u-count-down> -->
		<view class="" style="margin-top: 30rpx;background-color: white;border-radius: 10rpx;padding: 30rpx;">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="" style="font-weight: bold;">
					课程信息
				</view>
				<view class="" style="color: #F00505;">
					待支付
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;height: 152rpx;display: flex;align-items: center;">
				<view class="" style="width: 256rpx;height: 152rpx;border-radius: 10rpx;">
					<image :src="Info.image " style="width: 256rpx;height: 152rpx;border-radius: 10rpx;" mode="">
					</image>
				</view>
				<view class=""
					style="margin-left: 30rpx;height: 152rpx;display: flex;flex-direction: column;justify-content: space-between;">
					<view class=""
						style="display: flex;align-items: center;justify-content: space-between;width: 350rpx;">
						<view class="" style="font-size: 36rpx;font-weight: bold;">
							{{Info.course_name}}
						</view>

					</view>
					<view class="" style="display: flex;align-items: center;">
						<!-- <image src="/static/image/time.png" style="width: 24rpx;height: 24rpx;" mode=""></image> -->
						<view class="" style="margin-left: 10rpx;color: #717171;">
							{{Info.introduce}}
						</view>
					</view>

				</view>
			</view>
			<view class="" style="margin-top: 40rpx;display: flex;align-items: center;justify-content:space-between;">
				<view class="" style="color: #5062A7;" @click="profile">
					报名信息>
				</view>
				<view class="" style="font-size: 32rpx;">
					<span style="font-size: 20rpx;">¥</span>{{Info.goods.goods_price}}
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;background-color: white;border-radius: 10rpx;padding: 30rpx;">
			<view class="" style="font-weight: bold;">
				订单信息
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;justify-content: space-between;">
				<view class="">
					订单编号
				</view>
				<view class="">
					{{Info.order_no}}
				</view>
			</view>
			<view class="" style="margin-top: 26rpx;display: flex;justify-content: space-between;">
				<view class="">
					下单时间
				</view>
				<view class="">
					{{Info.create_time}}
				</view>
			</view>
		</view>
	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class="" style="display: flex;height: 100rpx;width: 100%;margin-bottom: 68rpx;">
			<view class=""
				style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: white;font-size: 32rpx;">
				总计：<span style="font-weight: bold;color: #F00505;">¥{{Info.pay_price}}</span>
			</view>
			<view class="" @click="cancel"
				style="flex: 1;display: flex;justify-content: center;align-items: center;background-color: #D8D8D8;font-size: 32rpx;">
				取消订单
			</view>
			<view class=""
				style="flex: 1;display: flex;justify-content: center;align-items: center;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);font-size: 32rpx;color: white;">
				立即支付
			</view>
		</view>
	</view>
	<u-modal v-model="modalShow" @confirm="modelConfirm" content="请确认是否要取消该订单？" title="取消订单" show-cancel-button
		:confirm-style="{'color':'white','background':'#5062A7'}"></u-modal>
	<view>
			<!-- <u-popup v-model="popShow" mode="center" border-radius="14" width="500rpx"> 
					
					<view style="width: 100%;padding: 30rpx;">
						<view class="" style="font-size: 36rpx;font-weight: bold;text-align: center;">
							报名信息
						</view>
						<view class="" style="padding: 20rpx;border-bottom: 1rpx solid #F5F6F8;display: flex;justify-content: space-between;font-size: 30rpx;">
							<view class="">
								姓名
							</view>
							<view class="" style="">
								123
							</view>
								
						</view>
					</view>
				</u-popup> -->
 
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { orderDetail } from '@/service/api/index'
	const modalShow = ref(false);
	const id = ref('')
	const popShow = ref(false);
	const Info = reactive({
		address: "",
		area: "",
		city: "",
		course_id: "",
		delivery_name: "",
		delivery_no: "",
		delivery_time: "",
		goods: {
			goods_cover: "",
			goods_price: ""
		},
		goods_id: "",
		id: "",
		image: "",
		introduce: "",
		mobile: "",
		name: "",
		order_no: "",
		pay_price: "",
		pay_time: "",
		province: "",
		specs: "",
		state: "",
		user_id: "",
		course_name: "",
		create_time: "",
		time: ""
	})
	onLoad((options) => {
		id.value = options.id;
		getData()
	})
	const getData = async () => {
		const res = await orderDetail({ id: id.value })
		for (let i in Info) {
			Info[i] = res.msg[i]
		}
		console.log(Info);
	}
	//报名信息
		
	const profile = ()=>{
		popShow.value = true;
	}
	//取消订单
	const cancel = () => {
		modalShow.value = true;
	}
	//确定取消
	const modelConfirm = () => {
		modalShow.value = false;
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		padding: 30rpx 30rpx 130rpx 30rpx;
		background-color: #F8F8F9;
		overflow: hidden;
	}

	:deep(.u-model__title) {
		font-size: 36rpx !important;
		font-weight: bold !important;
	}
</style>